<template>
  <view class="main-car">
    <van-tabs
      @click="onClick"
      color="#006CFF"
      title-active-color="#006CFF"
      sticky="true"
    >
      <view class="dropdown-menu">
        <view class="" @tap="selectBrand">
          {{ brandName }}
          <text class="icon"></text>
        </view>
        <view @tap="showArea = true">
          {{ regionStr }}
          <text class="icon"></text>
        </view>
      </view>
      <van-tab title="车商车源">
        <List ref="resource" type="resource" />
      </van-tab>
      <van-tab title="车商寻车">
        <List ref="find" type="find" v-if="currentIndex === 1" />
      </van-tab>
    </van-tabs>
    <view class="bottom-btn">
      <view @tap="show = true" class="button">发布车源 / 寻车</view>
    </view>
    <van-action-sheet
      :show="show"
      :actions="actions"
      @cancel="show = false"
      @select="onSelect"
      cancel-text="取消"
    />
    <van-popup
      :show="showArea"
      @close="showArea = false"
      position="bottom"
      get-container="body"
    >
      <van-area
        :area-list="areaList"
        columns-num="2"
        title="省市选择"
        @confirm="onConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
  </view>
</template>

<script>
import List from '@components/business/index/list'
import request from '@utils/ajax'
import Taro from '@tarojs/taro'
import { checkPermission, navigateTo, toLogin } from '@utils/index'
export default {
  name: 'BusinessCars',
  data() {
    return {
      value1: '',
      value2: '',
      show: false,
      currentIndex: 0,
      actions: [
        {
          name: '发布寻车信息',
          color: '#006CFF',
          path: 'business/find/publish',
          key: 'xc_fb'
        },
        {
          name: '发布车源信息',
          color: '#006CFF',
          path: 'business/resource/publish',
          key: 'cscy_fb'
        }
      ],
      showArea: false,
      areaList: [],
      regionStr: '所在地区',
      brandName: '品牌'
    }
  },
  computed: {},
  components: {
    List
  },
  created() {
    // Taro.eventCenter.on('selectCar', data => {
    //   console.log(this)
    //   this.brandName = data.brand_name
    //   this.getRef().search({ car_brand_id: data.brand_id })
    // })
    this.getAreas()
  },
  onReady() {
    Taro.eventCenter.on('publish', () => {
      this.getRef().getList({ page: 1 })
    })
    Taro.eventCenter.on('selectCar', data => {
      this.brandName = data.brand_name
      this.getRef().search({ car_brand_id: data.brand_id })
    })
  },
  onShow() {
    // if (this.$store.state.user.token) {
    //   this.getRef().getList({ page: 1 })
    // }
  },
  onShareAppMessage() {
    return {
      title: '车源/寻车'
    }
  },
  methods: {
    selectCar(data) {},
    getRef() {
      return this.currentIndex === 0 ? this.$refs.resource : this.$refs.find
    },
    selectBrand() {
      if (!this.$store.state.user.token) {
        toLogin()
        return
      }
      navigateTo('business/car-lib/index', {
        type: 'one',
        event: 'selectCar'
      })
    },
    getAreas() {
      request({
        url: 'common/region',
        auth: false
      })
        .then(res => {
          res.result.unshift({ label: '全国', value: '100000' })
          this.areaList = this.formatList(res.result)
        })
        .catch(e => e)
    },
    formatList(list) {
      let areaList = { province_list: {}, city_list: {}, county_list: {} }
      Array.isArray(list) &&
        list.forEach(province => {
          areaList.province_list[province.value] = province.label
          if (Array.isArray(province.children) && province.children.length) {
            province.children.forEach(city => {
              areaList.city_list[city.value] = city.label
              if (Array.isArray(city.children) && city.children.length) {
                city.children.forEach(county => {
                  areaList.county_list[county.value] = county.label
                })
              }
            })
          }
        })
      return areaList
    },
    onConfirm(e) {
      let values = e.detail.values
      const isAll = values[0].code === '100000'
      const str = values
        .filter(i => i)
        .map(item => item.name)
        .join('-')
      this.region = {
        province_code: values[0].code,
        city_code: isAll ? '' : values[1].code,
        address:
          str.length > 12 ? str.substr(0, 5) + '...' + str.substr(-5) : str
      }
      this.regionStr = this.region.address
      this.showArea = false
      const searchParams = isAll
        ? { province_code: '', city_code: '' }
        : { province_code: values[0].code, city_code: values[1].code }
      this.getRef().search(searchParams)
    },
    onClick(e) {
      this.currentIndex = e.detail.index
    },
    async onSelect(e) {
      await checkPermission(e.detail.key)
      navigateTo(e.detail.path)
      this.show = false
    }
  },
  onPullDownRefresh: function() {
    this.getAreas({ page: 1 }, true)
  }
}
</script>

<style>
page {
  height: 100%;
}
.dropdown-menu {
  width: 100%;
  height: 70rpx;
}
.dropdown-menu view {
  float: left;
  width: 50%;
  text-align: center;
  line-height: 70rpx;
  font-size: 28rpx;
}
.dropdown-menu view .icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url('./images/down.png') bottom center no-repeat;
  margin-left: 8rpx;
  background-size: cover;
  vertical-align: middle;
}
.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.625rem 0.8rem;
  background: #fff;
  z-index: 99;
}
.bottom-btn .button {
  width: 100%;
  background-color: #fff;
  border: 2px solid #006cff;
  border-radius: 12px;
  color: #006cff;
  font-size: 1.02rem;
  text-align: center;
  height: 86rpx;
  line-height: 86rpx;
}
</style>
